.box {
    padding-bottom: 100px;
    width: 100%;
    overflow: hidden;
    position: relative;
    min-height: 976px;
}

.bg-1 {
    position: absolute;
    top: 0;
    left: 0;
    background-position: -669px 0;
    width: 534px;
    height: 649px;
    background-image: url(../../images/personage/sprite-bg.png);
    background-size: 1975px 1054px;
    background-repeat: no-repeat;
}

.bg-2 {
    position: absolute;
    top: 0;
    right: 0;
    background-position: 0 0;
    width: 664px;
    height: 1054px;
    background-image: url(../../images/personage/sprite-bg.png);
    background-size: 1975px 1054px;
    background-repeat: no-repeat;
}

.bg-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    background-position: -1208px 0;
    width: 363px;
    height: 696px;
    background-image: url(../../images/personage/sprite-bg.png);
    background-size: 1975px 1054px;
    background-repeat: no-repeat;
}

.bg-4 {
    position: absolute;
    bottom: 0;
    right: 0;
    background-position: -1576px 0;
    width: 399px;
    height: 578px;
    background-image: url(../../images/personage/sprite-bg.png);
    background-size: 1975px 1054px;
    background-repeat: no-repeat;
}

.main-container {
    width: 1240px;
    margin: 0 auto;
    position: relative;
    font-size: 12px;
    color: #444;
}
.main-container a {
    color: #444;
}
.nvai {
    color: #888;
    font-size: 14px;
    position: relative;
    height: 50px;
    padding-top: 45px;
}

.icon-home {
    display: inline-block;
    width: 13px;
    height: 12px;
    margin-right: 10px;
    background-image: url(../../images/personage/首页.png);
    background-size: 100% 100%;
}

.navi a {
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    color: #000;
}

.navi a:hover {
    border-color: #000
}

.icon-arrow-nav {
    display: inline-block;
    background-image: url(../../images/personage/箭头.png);
    background-size: 100% 100%;
    width: 16px;
    height: 12px;
    margin: 0 15px;
}

.navi span {
    color: #888;
    font-size: 12px;
}

.navi::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
    background-position: -1185px 0;
    width: 1240px;
    height: 9px;
}

.userinfo {
    height: 120px;
    border: 1px solid #f1f1f1;
    background: #fff;
    margin-top: 110px;
    font-size: 12px;
    position: relative;
    display: block;
}

.user-head-1 {
    position: absolute;
    width: 138px;
    height: 138px;
    left: 55px;
    top: -65px;
}

.user-head-bg-1 {
    position: relative;
    z-index: 2;
    background-position: 0 -151px;
    width: 138px;
    height: 138px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}

.user-head-img-1 {
    width: 128px;
    height: 128px;
    line-height: 128px;
    position: absolute;
    left: 5px;
    top: 5px;
    border-radius: 100%;
    overflow: hidden;
    font-size: 0;
}

.user-head-img-1 img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.user-datum {
    margin: -56px 0 0 242px;
    width: 994px;
}

.d-wrap-0 {
    position: relative;
}

.name {
    font-size: 30px;
    color: #444;
    font-weight: 700;
    text-align: center;
    position: relative;
    top: 3px;
    margin-left: 0;
}

.icon-woman {
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
    background-position: -1715px -137px;
    width: 14px;
    height: 14px;
    display: inline-block;
}

.user-lv {
    background: #0baac0;
    border-radius: 4px;
    color: #fff;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
}

/* 注销按钮 */
.operation {
    display: inline-block;
    text-align: right;
    position: absolute;
    right: 0;
    top: 18px;
}

.operation a {
    margin-right: 30px;
    text-align: center;
}

.icon-cancel {
    margin: 0 5px;
    background-position: -1734px -137px;
    width: 13px;
    height: 14px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
    display: inline-block;
}

.operation span {
    margin: 0 5px;

}

.d-wrap-1 {
    margin-top: 26px;
    width: 600px;
}

.user-introduce {
    font-size: 14px;
    color: #aaa;
}

.d-wrap-2 {
    margin-top: 15px;
}

.mine {
    padding-left: 0;
    padding-right: 24px;
    display: inline-block;
}

/* 2 */

.icon-currency {
    margin: 0 5px 0 0;
    vertical-align: -3px;
    background-position: -1514px -137px;
    width: 16px;
    height: 16px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
    display: inline-block;
}

.num {
    color: #0baac0;
    font-weight: 700;
    display: block;
    text-align: center;
}

/* 我的动态 */
.dynamic {
    position: relative;
    display: inline-block;
    padding: 0 24px;
    text-align: center;
}

.dynamic span {
    display: block;
}

.dynamic::before {
    position: absolute;
    content: "";
    left: 0;
    top: 6px;
    background-position: -1223px -212px;
    width: 5px;
    height: 26px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}

.user-popularity {
    font-weight: 700;
    font-size: 30px;
    position: absolute;
    top: 22px;
    right: 10px;
}

.user-popularity a {
    position: relative;
    margin: 0 38px;
    text-align: center;
    display: inline-block;
}

.user-popularity a .num {
    color: #444;
    font-size: 30px;
}

.user-popularity a span {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    display: block;
}

.bean::after {
    position: absolute;
    content: "";
    right: -41px;
    top: 4px;
    background-position: -1199px -212px;
    width: 9px;
    height: 46px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}

.user-nav {
    height: 99px;
    border: 1px solid #f1f1f1;
    border-top: none;
    font-size: 0;
    background: #fff;
    overflow: hidden;
    display: block;
}
.on {
    width: 100%;
    font-weight: 700;
    position: relative;
    /* color: #0baac0; */
    -webkit-filter: none;
    filter: none;
    font-size: 18px;
    height: 99px;
    text-align: center;
    display: block;
    float: left;
}

.Chinese {
    font-weight: 700;
    color: #0baac0;
    display: block;
    margin-top: 30px
}
.English{
    font-weight: 700;
    font-size: 12px;
    display: block;
    margin-top: 0;
}
.on::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 5px;
    background: #0baac0;
    bottom: 0;
    left: 0;
}



/* 游戏信息页，我的游戏信息 */
.user-gameinfo-self{
    width: 100%;
    height: 356px;
    background: url(../../images/personage/game-info-bg.png) no-repeat center top;
    position: relative;
    margin-top: 10px;
    color: #fff;
}
.p-title{
    overflow: hidden;
    line-height: 27px;
    padding: 30px 0 0 30px;
    color: #fff;
}
.primary-title{
    float: left;
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    position: relative;
}
.primary-title:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 18px;
    background: #fff;
    top: 4px;
    left: 0;
}

.user-gameinfo-content {
    margin-top: -10px;
    padding-left: 30px;
}
.content-left{
    float: left;
    width: 369px;
}
.cl-top{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.user-head{
    position: relative;
    margin-top: 30px;
    width: 98px;
    height: 100px;
    display: block;
    float: left;
    top: 0;
    left: 0;
}
.game-head-bg-bg{
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    background-position: -1185px -34px;
    width: 98px;
    height: 98px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}
.user-head-img{
    width: 90px;
    height: 90px;
    line-height: 90px;
    left: 4px;
    position: absolute;
    top: 5px;
    border-radius: 100%;
    overflow: hidden;
    font-size: 0;
}
.user-head-img img{
    width: 90px;
    height: 90px;
    display: inline-block;
    vertical-align: middle;
}
/* 游戏id */
.game-info{
    margin-top: 25px;
    padding: 0 0 0 24px;
    position: relative;
    float: left;
    width: 210px;
}
.game-info p {
    margin-top: 10px;
}
.game-info:after {
    content: "";
    position: absolute;
    right: -10px;
    top: -8px;
    background-position: -314px -151px;
    width: 9px;
    height: 101px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}
.game-name{
    font-size: 18px;
}
.game-info .lv {
    color: #0baac0;
    margin: 0 0 0 5px;
}
.area{
    margin-right: 14px;
}
.game-info .p-wrap-gi1 a {
    color: #bb9a6c;
}
.game-info a {
    color: #aaa;
}
.game-info .p-wrap-gi2 a {
    margin-right: 10px;
}
.icon-rp{
    display: inline-block;
    margin-right: 4px;
    background-position: -1812px -76px;
    width: 13px;
    height: 12px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}
.icon-bcj{
    display: inline-block;
    margin-right: 4px;
    background-position: -1479px -104px;
    width: 10px;
    height: 12px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}

.user-gameinfo-self .cl-bottom {
    margin-top: 50px;
}

.user-gameinfo-self .cl-bottom{
    width: 100%;
}

.lv-group {
    position: relative;
    float: left;
}

.lv-group::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 0px;
    background-position: -314px -151px;
    width: 9px;
    height: 101px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}
.icon-lv{
    margin-left: 0;
    margin-top: 0;
    position: relative;
    width: 100px;
}
.lv-group div {
    float: left;
}
.lv-group .icon-lv img {
    width: 100%;
}

/* hover时显示的页面 */

.lv-group .level-info-frame {
    display: none;
    position: absolute;
    top: 93px;
    left: -30px;
    z-index: 2;
    animation: fadeIn .5s;
    text-align: center;
    background-position: 0 -46px;
    width: 460px;
    height: 100px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}
.lv-group .level-info-frame .lif-0{
    text-align: left;
    float: none;
    margin: 40px 10px 0;
    display: inline-block;
    position: relative;
}
.lv-group .level-info-frame img {
    width: 65px;
    float: left;
    margin-right: 10px;
    margin-top: -20px;
}
.lv-group .level-info-frame div {
    float: left;
}
.lv-group .level-info-frame div p:first-child {
    color: #bb9a6c;
}
.lv-group:hover .level-info-frame {
    display: block
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        display: none;
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 1;
        display: block;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        display: none;
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 1;
        display: block;
        transform: translate3d(0, 0, 0)
    }
}
/*  */
.lv-text{
    margin-top: 38px;
    width: 125px;
    text-align: center;
    margin-left: 10px;
    line-height: 23px;
}
.lv-group .lv-text span {
    line-height: 18px;
    margin-left: 14px;
    color: #d7b86f;
}
.content-right{
    display: block;
    float: left;
    margin-left: 30px;
    position: relative;
}
/* 数据图没有完成 */
.surface-frame {
    position: relative;
    float: left;
    margin: 0 0 0 20px
}

.surface-frame canvas {
    cursor: pointer
}

.surface-frame .data-site {
    position: absolute;
    left: 93px;
    top: 27px;
    background: #1b273f;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    text-align: center
}

.surface-frame span {
    display: inline-block;
    margin-top: 22px
}

.data-surface {
    width: 270px;
    height: 210px;
    position: relative;
    z-index: 9;
    margin-top: -36px;
    /* color: #fff */
}



/* 上面 */ 

.data-group{
    position: relative;
    float: left;
    padding: 35px 10px 0 15px;
    width: 270px;
}
.data-bg{
    display: block;
    opacity: 1;
    margin-right: 20px;
    float: left;
    background-position: -1185px -137px;
    width: 70px;
    height: 70px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
}
.data-group .num {
    font-size: 18px;
    margin-top: 13px;
}
.data-group div span {
    text-align: center;
    display: block;
    margin: 0 auto;
}

.often-hero{
    background: 0 0;
    color: #fff;
    position: absolute;
    top: 212px;
    left: 0;
    width: 100%;
    height: 60px;
}
.often-hero>span{
    line-height: 60px;
    margin-left: 30px;
    float: left;
    margin-right: 15px;
}
.often-hero-list{
    height: 60px;
    line-height: 60px;
    float: left
}
.often-hero-head{
    margin-right: 16px;
    font-size: 0;
    cursor: pointer;
    float: left;
}
.pic-wrap{
    border: 1px solid #000;
    border-radius: 50%;
    overflow: hidden;
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
}
.pic-wrap img {
    width: 56px;
    height: 56px;
    margin: -4px 0 0 -4px;
}
.user-gameinfo-bottom{
    background: 0 0;
    width: 320px;
    height: 60px;
    position: absolute;
    bottom: 30px;
    right: 0;
    left: auto;
}
.btn-honor {
    text-align: center;
    height: 28px;
    width: 110px;
    padding: 0;
    padding-right: 10px;
    line-height: 28px;
    display: block;
    border: 1px solid #bb9a6c;
    float: right;
    background: #000;
    margin-top: 15px;
    margin-right: 20px;
    color: #bb9a6c;
    border-radius: 5px;
    position: relative;
}
/* .btn-honor:hover:after {
    background-position: -2420px -14px;
    width: 5px;
    height: 8px;
    background-image: url(../../images/personage/sprite-img.png);
    background-size: 2425px 572px;
    background-repeat: no-repeat;
    top: 11px;
    right: 18px;
    background-position: -1849px -62px;
    width: 5px;
    height: 8px;
} */
.btn-hero-skin{
    text-align: center;
    height: 28px;
    width: 110px;
    padding: 0;
    padding-right: 10px;
    line-height: 28px;
    display: block;
    border: 1px solid #bb9a6c;
    float: right;
    background: #000;
    margin-top: 15px;
    margin-right: 20px;
    color: #bb9a6c;
    border-radius: 5px;
    position: relative;
}
/* 上面是我的游戏信息 */
/* 我的荣誉 */
.my-honor{
    padding: 16px 28px 0;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    background: #fff;
    width: 100%;
    margin: 10px 0 0;
    overflow: hidden;
}
.topbar{
    height: 40px;
    line-height: 40px;
    position: relative;
    padding: 0 0 25px;
}
.topbar::after{
    position: absolute;
    content: "";
    background-position: 0 0;
    width: 1182px;
    height: 9px;
    left: 0;
    bottom: 0;
    background-image: url(../../images/personage/game-info-spr.png);
    background-size: 1182px 294px;
    background-repeat: no-repeat;
}
.primary-title{
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    position: relative;
}
.primary-title:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 18px;
    background: #0fabc1;
    top: 12px;
    left: 0;
}
.topbar .unlock {
    font-size: 14px;
    font-weight: 400;
    margin-left: 29px;
}
.topbar .owned-num {
    color: #0fabc1;
    font-size: 24px;
    font-weight: 700;
    margin-left: 12px;
}
.honor-iconul{
    width: 1240px;
    overflow: hidden;
    text-align: center;
    margin-top: 30px;
    position: relative;
}
.my-honor .honor-iconul li {
    margin-bottom: 40px;
    float: left;
    margin-right: 53px;

}

.honor-iconul .times {
    color: #fff;
    font-size: 12px;
    line-height: 162px;
    position: relative;
}
.honor-iconul li span {
    display: inline-block;
    background-image: url(../../images/personage/game-info-spr.png);
    background-size: 1182px 294px;
    background-repeat: no-repeat;
}
.honor-iconul li .icon-name {
    font-size: 14px;
    margin-top: 11px;
    color: #aaa;
}
.triplekill {
    background-position: -894px -94px;
    width: 79px;
    height: 94px;
}
.quadrakill {
    background-position: -978px -94px;
    width: 78px;
    height: 94px;
}
.pentakill {
    background-position: -810px -94px;
    width: 79px;
    height: 94px;
}
.allrole {
    background-position: -551px -94px;
    width: 83px;
    height: 94px;
}
.kill {
    background-position: -373px -94px;
    width: 84px;
    height: 94px;
}
.helpkill {
    background-position: -284px -94px;
    width: 84px;
    height: 94px;
}
.godlike {
    background-position: 0 -94px;
    width: 100px;
    height: 94px;
}
.topvictory {
    background-position: -105px -94px;
    width: 85px;
    height: 94px;
}
.mvp {
    background-position: -725px -94px;
    width: 80px;
    height: 94px;
}
.ward-placed {
    background-position: -639px -94px;
    width: 81px;
    height: 94px;
}
.my-honor .honor-iconul:after {
    position: absolute;
    content: "";
    background-position: 0 0;
    width: 1182px;
    height: 9px;
    left: 0;
    bottom: 0;
    background-image: url(../../images/personage/game-info-spr.png);
    background-size: 1182px 294px;
    background-repeat: no-repeat;
}
/* 荣誉评分 */
.my-honor .honor-score {
    width: 100%;
    clear: both;
    margin-top: 27px;
    overflow: auto;
}
.my-honor .honor-score li {
    float: left;
    width: 196px;
    margin-bottom: 32px;
}
.my-honor .honor-score .score-key {
    font-size: 14px;
    color: #000;
    margin-right: 10px;
}
.my-honor .honor-score .score-value {
    font-size: 18px;
    color: #0baac0;
    font-weight: 700;
}
/* 英雄和皮肤 */
.hero-and-skin{
    padding: 16px 28px 0;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #ebebeb;
    background: #fff;
    font-size: 14px;
    margin: 10px 0 0;
    overflow: hidden;
}
.topbar {
    height: 40px;
    line-height: 40px;
    position: relative;
    padding: 0 0 25px;
}
.primary-title {
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    position: relative;
}
.primary-title:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 18px;
    background: #0fabc1;
    top: 4px;
    left: 0;
}
.topbar .unlock {
    font-size: 14px;
    font-weight: 400;
    margin-left: 29px;
}
.topbar .unlock {
    font-size: 14px;
    font-weight: 400;
    margin-left: 29px;
}
.topbar .unlock {
    font-size: 14px;
    font-weight: 400;
    margin-left: 29px;
}
.hero-and-skin .hero-filter {
    position: absolute;
    top: 2px;
    right: 40px;
}
.search-ipt {
    display: inline-block;
    font-size: 0;
    height: 40px;
}
.search-ipt .hero-search {
    box-sizing: border-box;
    width: 215px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    font-size: 14px;
    border: 1px solid #dcdcdc;
}
.search-ipt .btn-search {
    display: inline-block;
    border: none;
    float: none;
    vertical-align: top;
    margin: 0;
    cursor: pointer;
    background-position: -195px -14px;
    width: 40px;
    height: 40px;
    background-image: url(../../images/personage/game-info-spr.png);
    background-size: 1182px 294px;
}
.topbar:after {
    position: absolute;
    content: "";
    background-position: 0 0;
    width: 1182px;
    height: 9px;
    left: 0;
    bottom: 0;
}
/* 英雄列表 */
.hero-and-skin .hero-owned-list {
    width: 1212px;
    overflow: hidden;
}

.hero-and-skin .hero-owned-list .hero-o {
    float: left;
    margin: 0 25px 10px 0;
    position: relative;
    text-align: center;
    width: 76px;
    height: 112px;
    cursor: pointer;
}
.hero-and-skin .hero-owned-list .hero-o .img-box {
    width: 70px;
    height: 70px;
    position: relative;
    margin: 0 auto;
    border: 3px solid transparent;
}
/* 英雄的图片 */
.hero-and-skin .hero-owned-list .hero-o img {
    display: block;
    width: 100%;
    height: 100%;
}
/* 英雄名字 */
.hero-and-skin .hero-owned-list .hero-o p {
    font-size: 12px;
    color: #444;
    margin: 5px 0 0;
}
/* 黑色的阴影 */
.hero-and-skin .hero-owned-list .hero-o .unlock-role {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
}
/* 锁的标志 */
.lock {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -6px 0 0 -5px;
    background-position: -363px -14px;
    width: 10px;
    height: 13px;
    background-image: url(../../images/personage/game-info-spr.png);
    background-size: 1182px 294px;
    background-repeat: no-repeat;
    
}
/* 隐藏的文字 */
.hero-and-skin .hero-owned-list .hero-o .role-info {
    display: none;
    width: 100%;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 0;
    margin: -20px 0 0;
    line-height: 20px;
}
/* 隐藏的查看详情 */
.hero-and-skin .hero-owned-list .hero-o .check-info {
    color: #fff;
    display: inline-block;
}
/* 隐藏的立即购买 */
.hero-and-skin .hero-owned-list .hero-o .buynow {
    color: #bb9a6c;
    display: inline-block;
}
/* 鼠标移上去文字出现 */
.hero-and-skin .hero-owned-list .hero-o:hover .role-info {
    display: block
}
/* 鼠标移上去锁消失 */
.hero-and-skin .hero-owned-list .hero-o:hover .lock {
    display: none
}
/* 英雄皮肤 */
.hero-and-skin .skin-dl {
    width: 1212px;
    overflow: hidden;
    text-align: center;
    margin: 0 0 10px;
    display: none;
}
/* 已拥有的皮肤...标题 */
.hero-and-skin .skin-dl dt {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px;
    text-align: left;
}
/* 已拥有的皮肤...标题 */
.hero-and-skin .skin-dl dt .owned-num {
    color: #0fabc1;
    font-size: 24px;
    font-weight: 700;
    margin-left: 12px;
}
/* 皮肤图片的外面 */
.hero-and-skin .skin-dl dd {
    position: relative;
    float: left;
    width: 145px;
    height: 263px;
    margin-right: 28px;
    overflow: hidden;
    margin-bottom: 29px;
}
/* 皮肤图片 */
.hero-and-skin .skin-dl dd img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
}
/* 永久使用默认皮肤 */
.hero-and-skin .skin-dl dd p {
    font-size: 12px;
    width: 100%;
    position: absolute;
    bottom: 10px;
    z-index: 4;
}
/* 永久使用 */
.hero-and-skin .skin-dl .use-time {
    color: #fff;
}
/* 默认皮肤 */
.hero-and-skin .skin-dl .skin-name {
    color: #bb9a6c;
}
.hero-and-skin .skin-dl dd:after {
    content: "";
    background: -webkit-linear-gradient(top,transparent,#000);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
}
.hero-and-skin .skin-dl .skin-not-own {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 116px;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 3;
}
/* 历史战绩 */
.history{
    font-family: "\5FAE\8F6F\96C5\9ED1";
    background: #fff;
    margin: 10px 0 0;
}
.m-gamedata-container {
    height: auto;
    overflow: visible;
    padding-bottom: 100px;
    zoom: 1;
}
.m-gamedata-topbar {
    width: 100%;
    height: 120px;
    overflow: hidden;
}
.m-sort-bar {
    margin-top: 25px;
    overflow: hidden;
    box-sizing: border-box;
}
.primary-title {
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    position: relative;
}
.primary-title:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 18px;
    background: #0fabc1;
    top: 4px;
    left: 0;
}
.hero-select{
    width: 160px;
    height: 40px;
    cursor: pointer;
    box-sizing: border-box;
    margin-left: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-left: 10px;
    background: url(../../images/personage/btn-select.png) no-repeat 120px;
    color: #aaa;
    font-size: 14px;
    border: 1px solid #dcdcdc;
}
.m-sort-bar #competitionShare1{
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    
}
.m-sort-bar #competitionShare1 .tg-sns-qq{
    background-position: -164px -64px;
    width: 36px;
    height: 36px;
    background-image: url(../../images/personage/game-info-history-spr.png);
    background-size: 1183px 233px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.m-sort-bar #competitionShare1 .tg-sns-wechat{
    background-position: -123px -64px;
    width: 36px;
    height: 36px;
    background-image: url(../../images/personage/game-info-history-spr.png);
    background-size: 1183px 233px;
    background-repeat: no-repeat;
}
.m-sort-bar #competitionShare1 .tg-sns-weibo{
    background-position: -41px -64px;
    width: 36px;
    height: 36px;
    background-image: url(../../images/personage/game-info-history-spr.png);
    background-size: 1183px 233px;
    background-repeat: no-repeat;
}

.m-sort-bar .share-txt {
    height: 40px;
    line-height: 40px;
    margin-left: 30px;
    font-size: 14px;
    color: #404040;
}
/* .m-sort-bar #competitionShare1{
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
} */
.m-sort-bar .search-ipt {
    float: right;
    margin: 0;
    font-size: 0;
    height: 40px;
}
.search-ipt .hero-search {
    box-sizing: border-box;
    width: 215px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    font-size: 14px;
    border: 1px solid #dcdcdc;
}
.search-ipt .btn-search {
    display: inline-block;
    border: none;
    float: none;
    vertical-align: top;
    margin: 0;
    cursor: pointer;
    background-position: -195px -14px;
    width: 40px;
    height: 40px;
    background-image: url(../../images/personage/game-info-spr.png);
    background-size: 1182px 294px;
    background-repeat: no-repeat;
}
.m-player-record-container {
    width: 100%;
    height: auto;
    border-top: #c6c6c6 solid 1px;
}
.m-player-record-title {
    width: 100%;
    height: auto;
}
.m-player-record-title>li {
    width: 100%;
    height: 70px;
    line-height: 70px;
}
.m-player-record-title>li>a {
    float: left;
    font-size: 12px;
    color: #000;
}
.u-th-0 {
    width: 215px;
    overflow: hidden;
    text-align: left;
    margin-left: 14px;
}
.u-th-1 {
    width: 120px;
    overflow: hidden;
    text-align: left;
}
.u-th-2 {
    width: 280px;
    overflow: hidden;
    text-align: center;
    margin: 0 37px;
}
.u-th-3 {
    width: 110px;
    overflow: hidden;
    text-align: center;
}
.u-th-4 {
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.u-th-5 {
    width: 164px;
    overflow: hidden;
    text-align: center;
}
.m-player-record-content{
    width: 100%;
    height: auto;
}
.m-player-record-content>li {
    width: 100%;
    height: 90px;
    position: relative;
    line-height: 70px;
    transition: all .3s linear
}
.m-player-record-content .u-th-0 {
    width: 215px;
    overflow: hidden;
    text-align: left;
    margin-left: 14px;
}
.m-player-record-content .u-th-0 {
    width: 215px;
    overflow: hidden;
    text-align: left;
    margin-left: 14px;
}
.m-player-record-content .u-th-0>span {
    float: left;
    position: relative;
    z-index: 99;
    margin-right: 10px;
    width: 54px;
    height: 54px;
}
.m-player-record-content .u-th-0>span span {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 12px;
    z-index: 2;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    display: block;
    background: #0fabc1;
    border-radius: 50%;
}
.m-player-record-content .u-th-0 img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
}
.m-player-record-content .u-th-0 .u-win-lose.win {
    color: #00a383;
}
.m-player-record-content .u-th-0 .u-win-lose {
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.5;
}
.m-player-record-content .u-th-0 .u-win-lose.win:after {
    content: '胜利';
}
.m-player-record-content .u-th-0 .u-champion-name {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}
.m-player-record-content>li>span>a {
    display: block;
}
.m-player-record-content>li>span {
    float: left;
    margin-top: 18px;
    color: #aaa;
}
.u-th-1 {
    width: 120px;
    overflow: hidden;
    text-align: left;
}
.m-player-record-content .u-th-1 .u-game-map {
    margin-top: 6px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.m-player-record-content>li>span>a {
    display: block;
}
.m-player-record-content .u-th-1 .u-game-class {
    line-height: 1.5;
    font-size: 14px;
    color: #555;
}
.m-player-record-content .u-th-2 {
    text-align: center;
    position: relative;
    z-index: 99;
}
.m-player-record-content .u-th-2 img {
    float: left;
    margin: 8px 2px;
    width: 36px;
    height: 36px;
}
.m-player-record-content .u-th-3{
    color: #555;
    line-height: 54px;
}
.m-player-record-content>li>span {
    float: left;
    margin-top: 18px;
}
.u-th-3 {
    width: 110px;
    overflow: hidden;
    text-align: center;
}
.m-player-record-content .u-th-4{
    color: #555;
    line-height: 54px;
}
.m-player-record-content>li>span {
    float: left;
    margin-top: 18px;
}
.u-th-4 {
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.m-player-record-content .u-th-5 {
    color: #555;
    line-height: 54px;
}
.m-player-record-content>li>span {
    float: left;
    margin-top: 18px;
}
.u-th-5 {
    width: 164px;
    overflow: hidden;
    text-align: center;
}
.m-player-record-content>li>a{
    float: left;
    font-size: 12px;
    color: #000;
}
.u-click-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.m-player-record-content>li:after {
    content: "";
    background-position: 0 0;
    width: 1182px;
    height: 9px;
    position: absolute;
    bottom: -4px;
    left: 0;
    background-image: url(../../images/personage/game-info-spr.png);
    background-size: 1182px 294px;
    background-repeat: no-repeat;
}
.m-player-record-content>li:hover {
    background: #fff;
    box-shadow: rgba(3, 3, 8, .15) 0 0 38px;
    transform: translateY(-5px)
}

.m-player-record-content>li:hover:after {
    display: none
}
.u-showmore {
    line-height: 50px;
    width: 100%;
    background-color: #ebebeb;
    text-align: center;
    margin: 20px 0 0;
}
/* 上面是历史战绩 */